//1. 引入路由
import Vue from "vue";
import VueRouter from "vue-router";

const Home = () => import("../views/Home");
const Login = () => import("../views/Login");
const News = () => import("../views/Home/components/News");
const Music = () => import("../views/Home/components/Music");
const Game = () => import("../views/Home/components/Game");
const GameItem = () => import("../views/Home/components/Game/Item");

//2. 把路由作为插件使用
Vue.use(VueRouter);

//3. 实例化路由得到路由对象
export default new VueRouter({
  //设置路由模式为history模式!!!!
  mode: "history",
  //使用routes配置项配置路由表
  routes: [
    {
      path: "/home",
      component: Home,
      //如果当前的路由设置有默认子路由,则不建议书写name命名路由
      // name: "Home",
      //默认子路由配置方式2
      redirect: "/home/news",
      children: [
        {
          //二级路由及多级路由的path两种写法:1.完整的路径  2.只写当前二级路由的字符串地址,不带/
          path: "news",
          component: News,
          name: "News",
        },
        {
          path: "music",
          component: Music,
          name: "Music",
        },
        {
          path: "game",
          component: Game,
          name: "Game",
          children: [
            {
              path: "item/:id/:title?",
              component: GameItem,
              name: "GameItem",
              /* 
                我们可以在路由表中配置props属性,属性的值是一个对象
                对象的属性就会被通过props的形式传递给组件内部,组件内部通过props来接受
              
              */
             props:true,
            },
          ],
        },
        //默认子路由配置方式1
        /*  {
          path: "",
          redirect: "/home/news",
        }, */
      ],
    },
    {
      path: "/login",
      component: Login,
      name: "Login",
    },
    //匹配默认路由
    {
      path: "/",
      //重定向的配置
      redirect: "/home",
    },
  ],
});
